<template>
  <n-grid
    cols="4"
    :x-gap="16"
    :y-gap="16"
    item-responsive
    responsive="screen"
    class="index"
  >
    <n-grid-item
      v-for="item in topStatistics"
      :key="item.key"
      span="4 s:2 m:2 l:1 xl:1 2xl:1"
    >
      <div class="index-box index-statis">
        <div class="index-statis__title">{{ item.title }}</div>
        <div class="index-statis__text">{{ info[item.key] }}</div>
        <svg-icon
          name="line3"
          :color="item.color"
        />
        <span class="index-statis__compare">较上周{{ item.compare }}</span>
      </div>
    </n-grid-item>
    <n-grid-item span="0 s:4 m:4 l:3 xl:3 2xl:3">
      <div class="index-box index-recent">
        <div class="index-title">近期消费</div>
        <div
          ref="recentRef"
          class="flex1"
        ></div>
      </div>
    </n-grid-item>
    <n-grid-item span="4 s:4 m:4 l:1 xl:1 2xl:1">
      <div class="index-box index-expend">
        <div class="index-title">消费排行</div>
        <div
          ref="expendRef"
          class="flex1"
        ></div>
      </div>
    </n-grid-item>
    <n-grid-item span="0 s:4 m:4 l:3 xl:3 2xl:3">
      <div class="index-box index-table">
        <div class="index-title">消费详情</div>
        <n-data-table
          :columns="columns"
          :data="data"
          size="small"
        >
        </n-data-table>
      </div>
    </n-grid-item>
    <n-grid-item span="4 s:4 m:4 l:1 xl:1 2xl:1">
      <div class="index-box index-backlog">
        <div class="index-title">待办事项</div>
        <n-scrollbar class="flex1">
          <n-timeline>
            <n-timeline-item content="啊" />
            <n-timeline-item
              type="success"
              title="成功"
              content="哪里成功"
              time="2018-04-03 20:46"
            />
            <n-timeline-item
              type="error"
              content="哪里错误"
              time="2018-04-03 20:46"
            />
            <n-timeline-item
              type="warning"
              title="警告"
              content="哪里警告"
              time="2018-04-03 20:46"
            />
            <n-timeline-item
              type="info"
              title="信息"
              content="是的"
              time="2018-04-03 20:46"
              line-type="dashed"
            />
            <n-timeline-item content="啊" />
          </n-timeline>
        </n-scrollbar>
      </div>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts" setup>
  const { $eChart }: any = useNuxtApp()

  // 顶部统计数据
  const topStatistics = [
    {
      title: '今日收入',
      value: '23.21',
      key: 'income',
      compare: '+30%',
      color: ''
    },
    {
      title: '今日支出',
      value: '23.21',
      key: 'expend',
      compare: '+30%',
      color: '#4e6af9'
    },
    {
      title: '今日待办',
      key: 'backlog',
      value: '2',
      color: '#f55980'
    },
    {
      title: '今日已办',
      key: 'finish',
      value: '0',
      color: '#ecad4c'
    }
  ]

  const columns = [
    {
      title: '日期',
      key: 'date'
    },
    {
      title: '收入',
      key: 'income'
    },
    {
      title: '支出',
      key: 'expend'
    },
    {
      title: '备注',
      key: 'remark'
    }
  ]

  const info = ref<any>({
    income: 0,
    expend: 0,
    backlog: 0,
    finish: 0
  })

  const data = ref([])

  // 近期图表ref
  const recentRef = ref(null)
  // 近期图表实例
  const recentChart = ref<any>(null)
  // 创建近期图表
  function createRecentChart() {
    const chart = $eChart.init(recentRef.value)
    chart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['收入', '支出']
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '3%',
        top: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
          show: false // 这里设置为false，即不显示 x 轴的轴线
        },
        axisLabel: {
          color: '#999' // 这里设置 x 轴刻度字体颜色为红色
        },
        axisTick: {
          show: false // 这里设置为false，即不显示 y 轴的刻度线
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true // 这里设置为false，即不显示 x 轴的分割线
        },
        axisLabel: {
          color: '#999' // 这里设置 x 轴刻度字体颜色为红色
        }
      },
      series: [
        {
          smooth: 0.5,
          symbol: 'none',
          name: '收入',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210],
          itemStyle: {
            color: '#2080f0'
          },
          lineStyle: {
            width: 3, // 设置线段粗细
            lineCap: 'round'
          }
        },
        {
          smooth: 0.5,
          symbol: 'none',
          name: '支出',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310],
          itemStyle: {
            color: '#f33e62'
          },
          lineStyle: {
            width: 3, // 设置线段粗细
            lineCap: 'round'
          }
        }
      ]
    })

    window.addEventListener('resize', () => {
      chart.resize()
    })
  }

  // 支出占比图表ref
  const expendRef = ref(null)
  // 支出占比图表实例
  const expendChart = ref<any>(null)

  // 创建支出占比图表
  function createExpendChart() {
    const chart = $eChart.init(expendRef.value)
    chart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '0',
        left: '0',
        orient: 'vertical'
      },
      series: [
        {
          name: '消费排行',
          type: 'pie',
          padAngle: 3,
          center: ['50%', '35%'],
          radius: ['47%', '63%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: fontSizeRem(24),
            borderColor: '#fff',
            borderWidth: 2,
            color: (color: any) => {
              const colorList = ['#4755f4', '#ff4242', '#41d473', '#ff5628']
              return colorList[color.dataIndex]
            }
          },
          label: {
            show: true,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            backgroundColor: '#fff',
            shadowBlur: 10,
            padding: [fontSizeRem(38), 0],
            width: fontSizeRem(130),
            borderRadius: 999,
            position: 'center',
            borderType: [5, 10],
            borderDashOffset: 5,
            formatter: (e: any) => [`{a|${e.percent}%}`, `{b|${e.name}}`].join('\n'),
            rich: {
              a: {
                fontSize: fontSizeRem(24),
                fontWeight: 'bold',
                lineHeight: fontSizeRem(40)
              },
              b: {
                color: '#999'
              }
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '餐饮' },
            { value: 735, name: '交通' },
            { value: 580, name: '购物' },
            { value: 580, name: '旅游' }
          ]
        }
      ]
    })
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }

  onMounted(() => {
    createRecentChart()
    createExpendChart()
  })
</script>

<style scoped lang="scss">
  .svg-icon {
    color: #2ba866;
    font-size: 138px;
    position: absolute;
    right: 28px;
    bottom: -20px;
  }
  .index {
    padding: 16px;
    box-sizing: border-box;
    &-statis {
      padding: 24px !important;
      height: 160px;
      &__title {
        color: #999;
        margin-bottom: 8px;
      }
      &__text {
        font-size: 24px;
        font-weight: bold;
      }
      &__compare {
        position: absolute;
        bottom: 24px;
        left: 24px;
        font-size: 12px;
        color: #cf7373;
      }
    }
    &-recent {
      height: 400px;
    }
    &-expend {
      height: 400px;
    }
    &-table {
      height: 400px;
    }
    &-backlog {
      height: 400px;
    }
    &-title {
      margin-bottom: 12px;
      font-weight: bold;
    }
    &-box {
      padding: 16px 24px;
      background-color: #fff;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      box-shadow: $shadow-lv2;
      border-radius: $radius-default;
      position: relative;
    }
  }
</style>
